<template>
  <div class="app-container">
    <div class="container">
      <div class="main page page-list">
        <div class="head-container">
          <el-card shadow="never">
            <div class="search-bar pd">
              <el-form :inline="true" :model="searchModel" size="mini" class="demo-form-inline">
                <el-form-item label="用户编号">
                  <el-input v-model="searchModel.userId" placeholder="用户编号" />
                </el-form-item>
                <el-form-item label="支付宝账号">
                  <el-input v-model="searchModel.alipayNickName" placeholder="支付宝账号" />
                </el-form-item>
                <el-form-item label="企业名称">
                  <el-input v-model="searchModel.businessName" placeholder="企业名称" />
                </el-form-item>
                <el-form-item label="审核状态:">
                  <el-radio-group @change="getList(1)" v-model="searchModel.auditStatus">
                    <el-radio-button label="">不限</el-radio-button>
                    <el-radio-button label="temp">临时状态</el-radio-button>
                    <el-radio-button label="init">待提交</el-radio-button>
                    <el-radio-button label="auditing">审核中</el-radio-button>
                    <el-radio-button label="normal">已认证</el-radio-button>
                    <el-radio-button label="fail">审核拒绝</el-radio-button>
                  </el-radio-group>
                </el-form-item>

                <el-form-item label="审核时间">
                  <el-date-picker v-model="searchModel.auditTime" :default-time="['00:00:00']" type="datetimerange"
                    start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" />
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" @click="search">查询</el-button>
                  <el-button type="default" @click="reset">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </div>

        <div class="data-list-wrap">
          <el-card shadow="never">
            <el-table v-loading="loading" :data="list" size="mini" style="width: 100%">
              <el-table-column prop="auditSubmitTime" label="提交时间" />
              <el-table-column prop="userId" label="商户信息" width="150">
                <template slot-scope="scope">
                  <div>
                    商户编号：{{ scope.row.userId }}
                  </div>
                  <div>
                    商户名称：{{ scope.row.username }}
                  </div>
                  <div>
                    合伙人编号：{{ scope.row.partnerId ? scope.row.partnerId : '-' }}
                  </div>
                  <div>
                    合伙人名称：{{ scope.row.partnerName ?  scope.row.partnerName : '-' }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="alipayNickName" label="支付宝账号" />
              <el-table-column prop="businessName" label="企业名称" />
              <el-table-column label="网站备案信息" width="120">
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.icpInfo ? scope.row.icpInfo : "-" }}
                  </div>
                </template>
              </el-table-column>

              <el-table-column label="审核状态">
                <template slot-scope="scope">
                  <span v-if="scope.row.auditStatus === 'temp'" style="color: #909399">临时</span>
                  <span v-if="scope.row.auditStatus === 'init'" style="color: #909399">待提交</span>
                  <span v-if="scope.row.auditStatus === 'auditing'" style="color: #409eff">审核中</span>
                  <span v-if="scope.row.auditStatus === 'normal'" style="color: #67c23a">已认证</span>
                  <span v-if="scope.row.auditStatus === 'fail'" style="color: #f56c6c">审核拒绝</span>
                </template>
              </el-table-column>
              <el-table-column prop="idCardFront" label="法人手持身份证人像面">
                <template slot-scope="scope">
                  <el-image class="images-body" :src="scope.row.idCardFront" :preview-src-list="[scope.row.idCardFront]"
                    v-if="scope.row.idCardFront"></el-image>
                </template>
              </el-table-column>

              <el-table-column prop="idCardBack" label="法人手持身份证国徽面">
                <template slot-scope="scope">
                  <el-image class="images-body" :src="scope.row.idCardBack" :preview-src-list="[scope.row.idCardBack]"
                    v-if="scope.row.idCardBack"></el-image>
                </template>
              </el-table-column>
              <el-table-column label="营业执照">
                <template slot-scope="scope">
                  <el-image class="images-body" :src="scope.row.bizLicense" :preview-src-list="[scope.row.bizLicense]"
                    v-if="scope.row.bizLicense"></el-image>
                </template>
              </el-table-column>

              <el-table-column label="法人手持营业执照">
                <template slot-scope="scope">
                  <el-image class="images-body" :src="scope.row.businessLicense"
                    :preview-src-list="[scope.row.businessLicense]" v-if="scope.row.businessLicense"></el-image>
                </template>
              </el-table-column>
              <el-table-column label="办公室照片">
                <template slot-scope="scope">
                  <div v-for="(images, index) in scope.row.officeImages" :key="index">
                    <el-image class="images-body" :src="images" :preview-src-list="scope.row.officeImages"
                      v-if="images && images.length"></el-image>
                  </div>
                </template>
              </el-table-column>

              <el-table-column label="商务业务说明" width="120">
                <template slot-scope="scope">
                  <el-image class="images-body" :src="scope.row.bizSceneDesc" :preview-src-list="[scope.row.bizSceneDesc]"
                    v-if="scope.row.bizSceneDesc"></el-image>
                </template>
              </el-table-column>

              <el-table-column label="商户承诺书" width="120">
                <template slot-scope="scope">
                  <el-image class="images-body" :src="scope.row.merchantCommitment"
                    :preview-src-list="[scope.row.merchantCommitment]" v-if="scope.row.merchantCommitment"></el-image>
                </template>
              </el-table-column>

              <el-table-column label="其他资质图片" width="120">
                <template slot-scope="scope">
                  <el-image class="images-body" :src="scope.row.otherOneImages"
                    :preview-src-list="[scope.row.otherOneImages]" v-if="scope.row.otherOneImages"></el-image>

                  <el-image class="images-body" :src="scope.row.otherTwoImages"
                    :preview-src-list="[scope.row.otherTwoImages]" v-if="scope.row.otherTwoImages"></el-image>

                  <el-image class="images-body" :src="scope.row.otherThreeImages"
                    :preview-src-list="[scope.row.otherThreeImages]" v-if="scope.row.otherThreeImages"></el-image>
                </template>
              </el-table-column>


              <el-table-column label="审核信息">
                <template slot-scope="scope">
                  <div>{{ scope.row.auditMessage ? scope.row.auditMessage : "-" }}</div>
                </template>
              </el-table-column>

              <el-table-column prop="auditTime" label="审核时间" />

              <el-table-column label="修改时间">
                <template slot-scope="scope">
                  <div>{{ scope.row.modifyTime ? scope.row.modifyTime : "-" }}</div>
                </template>
              </el-table-column>

              <el-table-column fixed="right" label="操作" width="180">
                <template slot-scope="scope">
                  <div class="cz-button">
                    <div v-if="scope.row.auditStatus === 'auditing'">

                      <el-popover placement="top" width="200" :ref="'auditSuccess' + scope.row.id" trigger="click">
                        <p>是否审核通过？</p>
                        <div style="text-align: right; margin: 0">
                          <el-button size="mini" type="text" @click="
                            $refs['auditSuccess' + scope.row.id].doClose()
                            ">取消</el-button>
                          <el-button :loading="opLoading" type="primary" size="mini"
                            @click="businessAuditSuccess(scope.row.id)">确定</el-button>
                        </div>
                        <el-button v-permission="['ADMIN','safe-pay-business-auth-audit-record::audit-success']" size="mini" type="primary" slot="reference"
                          :value="scope.row.id">
                          审核成功
                        </el-button>
                      </el-popover>
                    </div>


                    <div>
                      <el-button style="margin-top:8px" v-if="scope.row.auditStatus === 'auditing'"
                        v-permission="['ADMIN','safe-pay-business-auth-audit-record::audit-fail']" size="mini" type="danger" @click="businessAuditFail(scope.row)">
                        审核失败
                      </el-button>
                    </div>

                    <div>

                      <el-button style="margin-top:8px;"
                        v-if="scope.row.auditStatus === 'auditing' || scope.row.auditStatus === 'normal' || scope.row.auditStatus === 'init'"
                        v-permission="['ADMIN','safe-pay-business-auth-audit-record::update-info']" size="mini" type="success" @click="updateInfo(scope.row)">
                        修改信息
                      </el-button>
                    </div>

                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div class="paging-wrap">
              <el-pagination :current-page="searchModel.pageNo" :page-sizes="[10, 20, 50, 100]"
                :page-size="searchModel.pagesize" :total="searchModel.count"
                layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
            </div>
          </el-card>
        </div>
        <!-- 审核失败 -->
        <el-dialog title="审核失败" :close-on-click-modal="false" :modal-append-to-body="false" width="50%"
          :visible.sync="dialogFailVisible">
          <el-input type="text" v-model="auditFailForm.auditMessage" placeholder="请输入审核失败原因"></el-input>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogFailVisible = false">取 消</el-button>
            <el-button type="primary" @click="sureAuditFail" :loading="opFailLoading">确 定</el-button>
          </span>
        </el-dialog>

        <!-- 修改信息 -->
        <el-dialog title="修改信息" :close-on-click-modal="false" :modal-append-to-body="false" width="60%"
          :visible.sync="updateDialog">
          <div class="enterprise-content">
            <el-form :model="updateForm" label-width="180px" :rules="updateRules" ref="updateForm">
              <el-form-item label="修改时间" prop="modifyTime">
                <span>{{ updateForm.modifyTime }}</span>
              </el-form-item>

              <el-form-item label="企业名称" prop="businessName">
                <el-input style="width: 246px" v-model="updateForm.businessName"></el-input>
              </el-form-item>

              <el-form-item label="网站/APP备案信息" prop="icpInfo">
                <el-input style="width: 246px" v-model="updateForm.icpInfo" placeholder="请提供网站地址/APP下载链接"></el-input>
              </el-form-item>

              <div style="display: flex; align-items: center;">
                <el-form-item label="法人手持身份证人像面" prop="idCardFront">
                  <div style="display: flex;align-items: center;">
                    <el-upload class="avatar-uploader" action="/api/admin/image" :show-file-list="false"
                      accept="image/jpeg,image/png" :on-success="handleAvatarSuccess1"
                      :before-upload="beforeAvatarUpload">
                      <img v-if="updateForm.idCardFront" :src="updateForm.idCardFront" class="avatar" />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div class="previewBox m-l-8" @click="onPreview(updateForm.idCardFront)">
                      <img class="previewImg" src="../../assets/image/preview.png">
                      <a style="color:#999999">查看</a>
                    </div>
                  </div>
                </el-form-item>

                <el-form-item label="法人手持身份证国徽面" prop="idCardBack">

                  <div style="display: flex;align-items: center;">
                    <el-upload class="avatar-uploader" action="/api/admin/image" :show-file-list="false"
                      accept="image/jpeg,image/png" :on-success="handleAvatarSuccess4"
                      :before-upload="beforeAvatarUpload">
                      <img v-if="updateForm.idCardBack" :src="updateForm.idCardBack" class="avatar" />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div class="previewBox m-l-8" @click="onPreview(updateForm.idCardBack)">
                      <img class="previewImg" src="../../assets/image/preview.png">
                      <a style="color:#999999">查看</a>
                    </div>
                  </div>
                </el-form-item>
              </div>

              <div style="display: flex; align-items: center;">
                <el-form-item label="营业执照" prop="bizLicense">

                  <div style="display: flex;align-items: center;">
                    <el-upload class="avatar-uploader" action="/api/admin/image" :show-file-list="false"
                      accept="image/jpeg,image/png" :on-success="handleBizLicenseSuccess"
                      :before-upload="beforeAvatarUpload">
                      <img v-if="updateForm.bizLicense" :src="updateForm.bizLicense" class="avatar" />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div class="previewBox m-l-8" @click="onPreview(updateForm.bizLicense)">
                      <img class="previewImg" src="../../assets/image/preview.png">
                      <a style="color:#999999">查看</a>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label="法人手持营业执照" prop="businessLicense">

                  <div style="display: flex;align-items: center;">
                    <el-upload class="avatar-uploader" action="/api/admin/image" :show-file-list="false"
                      accept="image/jpeg,image/png" :on-success="handleAvatarSuccess2"
                      :before-upload="beforeAvatarUpload">
                      <img v-if="updateForm.businessLicense" :src="updateForm.businessLicense" class="avatar" />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div class="previewBox m-l-8" @click="onPreview(updateForm.businessLicense)">
                      <img class="previewImg" src="../../assets/image/preview.png">
                      <a style="color:#999999">查看</a>
                    </div>
                  </div>
                </el-form-item>
              </div>

              <el-form-item label="办公室照片" prop="officeImages">
                <div class="flex-box">
                  <el-upload class="avatar-uploader m-r-8" action="/api/admin/image" :show-file-list="false"
                    accept="image/jpeg,image/png" :on-success="handleofficeImage1Success"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="officeImage1" :src="officeImage1" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    <div v-if="!officeImage1" class="text-info upload-text-tip">上传门头照</div>

                  </el-upload>
                  <el-upload class="avatar-uploader m-r-8" action="/api/admin/image" :show-file-list="false"
                    accept="image/jpeg,image/png" :on-success="handleofficeImage2Success"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="officeImage2" :src="officeImage2" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    <div v-if="!officeImage2" class="text-info upload-text-tip">上传内景照1</div>
                  </el-upload>
                  <el-upload class="avatar-uploader" action="/api/admin/image" :show-file-list="false"
                    accept="image/jpeg,image/png" :on-success="handleofficeImage3Success"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="officeImage3" :src="officeImage3" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    <div v-if="!officeImage3" class="text-info upload-text-tip">上传内景照2</div>
                  </el-upload>
                  <div class="previewBox m-l-8" @click="onPreview(officeImage1, officeImage2, officeImage3)">
                    <img class="previewImg" src="../../assets/image/preview.png">
                    <a style="color:#999999">查看</a>
                  </div>
                </div>


              </el-form-item>


              <el-form-item label="商务业务说明" prop="bizSceneDesc">

                <div style="display: flex;align-items: center;">
                  <el-upload class="avatar-uploader" action="/api/admin/image" :show-file-list="false"
                    accept="image/jpeg,image/png" :on-success="handleAvatarSuccess5" :before-upload="beforeAvatarUpload">
                    <img v-if="updateForm.bizSceneDesc" :src="updateForm.bizSceneDesc" class="avatar1" />
                    <i v-else class="el-icon-plus avatar-uploader-icon2"></i>
                  </el-upload>
                  <div class="previewBox m-l-8" @click="onPreview(updateForm.bizSceneDesc)">
                    <img class="previewImg" src="../../assets/image/preview.png">
                    <a style="color:#999999">查看</a>
                  </div>
                </div>
              </el-form-item>

              <el-form-item label="商户承诺书" prop="merchantCommitment">


                <div style="display: flex;align-items: center;">
                  <el-upload class="avatar-uploader" action="/api/admin/image" :show-file-list="false"
                    accept="image/jpeg,image/png" :on-success="handleAvatarSuccess6" :before-upload="beforeAvatarUpload">
                    <img v-if="updateForm.merchantCommitment" :src="updateForm.merchantCommitment" class="avatar1" />
                    <i v-else class="el-icon-plus avatar-uploader-icon2"></i>
                  </el-upload>
                  <div class="previewBox m-l-8" @click="onPreview(updateForm.merchantCommitment)">
                    <img class="previewImg" src="../../assets/image/preview.png">
                    <a style="color:#999999">查看</a>
                  </div>
                </div>
              </el-form-item>

              <el-form-item label="其他资质照片" prop="otherImages">
                <div class="flex-box">
                  <el-upload class="avatar-uploader m-r-8" action="/api/admin/image" :show-file-list="false"
                    accept="image/jpeg,image/png" :on-success="handleOtherImage1Success"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="updateForm.otherOneImages" :src="updateForm.otherOneImages" class="avatar1" />
                    <i v-else class="el-icon-plus avatar-uploader-icon2"></i>

                  </el-upload>
                  <el-upload class="avatar-uploader m-r-8" action="/api/admin/image" :show-file-list="false"
                    accept="image/jpeg,image/png" :on-success="handleOtherImage2Success"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="updateForm.otherTwoImages" :src="updateForm.otherTwoImages" class="avatar1" />
                    <i v-else class="el-icon-plus avatar-uploader-icon2"></i>

                  </el-upload>

                  <el-upload class="avatar-uploader" action="/api/admin/image" :show-file-list="false"
                    accept="image/jpeg,image/png" :on-success="handleOtherImage3Success"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="updateForm.otherThreeImages" :src="updateForm.otherThreeImages" class="avatar1" />
                    <i v-else class="el-icon-plus avatar-uploader-icon2"></i>
                  </el-upload>
                  <div class="previewBox m-l-8"
                    @click="onPreview(updateForm.otherOneImages, updateForm.otherTwoImages, updateForm.otherThreeImages)">
                    <img class="previewImg" src="../../assets/image/preview.png">
                    <a style="color:#999999">查看</a>
                  </div>
                </div>


              </el-form-item>

            </el-form>
          </div>

          <div slot="footer" class="dialog-footer">
            <el-button @click="updateDialog = false">取 消</el-button>
            <el-button :loading="opLoading" type="primary" @click="doUpdateInfo">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
    <el-image-viewer v-if="showViewer" :on-close="closeViewer" :initial-index="initialIndex" :url-list="fileUrls" />
  </div>
</template>

<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import { searchSafePayBusinessAuthAuditRecord, auditSuccess, auditFail, updateSafePayAccountInfo } from "@/api/business";
const defaultModel = {
  userId: "",
  alipayNickName: "",
  businessName: "",
  auditTime: "",
  auditStatus: "",
  pageNo: 1,
  pageSize: 10,
  count: 0,
};
export default {
  data() {
    return {
      showViewer: false,//图片预览是否显示
      initialIndex: 0,//打开图片预览时候的索引
      fileUrls: [],//图片的地址

      searchModel: _.cloneDeep(defaultModel),
      list: [],
      loading: false,
      dialogFailVisible: false,
      updateDialog: false,
      visible: false,
      auditFailForm: {},
      updateForm: {
        businessName: "",
        auditStatus: "",
        idCardFront: "",
        idCardBack: "",
        bizSceneDesc: "",
        merchantCommitment: "",
        businessLicense: "",
        otherOneImages: '',
        otherTwoImages: '',
        otherThreeImages: "",
        officeImages: [],
        bizLicense: "",
      },
      updateRules: {
        businessName: [
          {
            required: true,
            message: "请输入企业名称",
            max: 64,
            trigger: "blur",
          },
        ],
        idCardFront: [{ required: true, message: "请上传法人手持身份证正面" }],
        idCardBack: [{ required: true, message: "请上传法人手持身份证反面" }],
        businessLicense: [
          { required: true, message: "请上传法人手持营业执照" },
        ],
        bizLicense: [
          { required: true, message: "请上传营业执照" },
        ],
        officeImages: [
          {
            type: "array",
            required: true,
            message: "请上传3张办公室照片",
            min: 3,
            max: 3,
          },
        ],
        bizSceneDesc: [{ required: true, message: "请上传商务业务说明" }],
        merchantCommitment: [{ required: true, message: "请上传商户承诺书" }],
      },
      officeImage1: "",
      officeImage2: "",
      officeImage3: "",
      officeImageFiles: [],
      opLoading: false,
      opFailLoading: false,
    };
  },
  created() {
    // 初始化数据
    this.getList(1);
  },
  components: {
    ElImageViewer
  },
  methods: {
    //点击按钮打开图片预览
    onPreview(url1, url2, url3) {
      this.fileUrls = []
      if (!url1) {
        return
      }
      if (url1) {
        this.fileUrls.push(url1)
      }
      if (url2) {
        this.fileUrls.push(url2)
      }
      if (url3) {
        this.fileUrls.push(url3)
      }
      this.showViewer = true
    },
    // 关闭查看器
    closeViewer() {
      this.showViewer = false
    },

    // 修改分页
    handleSizeChange(val) {
      this.searchModel.pageSize = val;
      this.getList(1);
    },
    // 修改页面
    handleCurrentChange(val) {
      this.loading = true;
      this.getList(val);
    },

    //修改信息
    updateInfo(row) {
      this.updateForm = _.cloneDeep(row);
      this.processItem(this.updateForm)
      this.updateDialog = true;
    },

    //确定修改信息
    doUpdateInfo() {
      this.updateForm.officeImages = [];
      if (this.officeImage1) {
        this.updateForm.officeImages.push(this.officeImage1)
      }
      if (this.officeImage2) {
        this.updateForm.officeImages.push(this.officeImage2)
      }
      if (this.officeImage3) {
        this.updateForm.officeImages.push(this.officeImage3)
      }
      let form = {
        id: this.updateForm.id,
        icpInfo: this.updateForm.icpInfo,
        idCardFront: this.updateForm.idCardFront,
        businessName: this.updateForm.businessName,
        bizLicense: this.updateForm.bizLicense,
        businessLicense: this.updateForm.businessLicense,
        officeImages: this.updateForm.officeImages,
        idCardBack: this.updateForm.idCardBack,
        bizSceneDesc: this.updateForm.bizSceneDesc,
        merchantCommitment: this.updateForm.merchantCommitment,
        otherOneImages: this.updateForm.otherOneImages,
        otherTwoImages: this.updateForm.otherTwoImages,
        otherThreeImages: this.updateForm.otherThreeImages,
      };
      updateSafePayAccountInfo(form).then((resp => {
        if (resp.success) {
          this.$notify({
            title: "修改成功",
            type: "success",
            duration: 2500,
          });
          this.updateDialog = false;
          this.search()
        }
        this.opLoading = false;
      }))
    },
    //审核通过
    businessAuditSuccess(id) {
      this.opLoading = true;
      auditSuccess(id).then(resp => {
        if (resp.success) {
          this.$notify({
            title: "操作成功",
            type: "success",
            duration: 2500,
          });
          this.$refs["auditSuccess" + id].doClose();
          this.search();
        }
        this.opLoading = false;
      }).catch(err => {

      })


    },
    //审核失败
    businessAuditFail(row) {
      this.dialogFailVisible = true;
      this.auditFailForm = _.cloneDeep(row);
    },
    //确定审核失败
    sureAuditFail() {
      this.opFailLoading = true;
      let form = {
        id: this.auditFailForm.id,
        auditMessage: this.auditFailForm.auditMessage
      }
      auditFail(form).then(resp => {
        if (resp.success) {
          this.$notify({
            title: "操作成功",
            type: "success",
            duration: 2500,
          });
          this.dialogFailVisible = false;
          this.search();
        } else {
          this.$message.error(resp.resultMessage);
        }
        this.opFailLoading = false;
      }).catch(err => {

      })

    },

    getList(pageNo) {
      var self = this;
      this.loading = true;
      if (pageNo != undefined) {
        this.searchModel.pageNo = pageNo;
      }
      let searchModel = _.cloneDeep(this.searchModel);
      searchSafePayBusinessAuthAuditRecord(this.compileSearchModel(searchModel))
        .then((data) => {
          self.searchModel.pageNo = ++data.pageNo;
          self.searchModel.count = data.count;
          self.searchModel.pageSize = data.pageSize;
          self.list = data.data;

          self.loading = false;
        })
        .catch((err) => { });
    },
    // 重置查询条件
    reset() {
      this.searchModel = _.cloneDeep(defaultModel);
      this.getList(1);
    },
    // 查询
    search() {
      this.getList(1);
    },
    // 对searchModel进行处理
    compileSearchModel(searchModel) {
      searchModel.pageNo = searchModel.pageNo - 1;
      if (searchModel.auditTime && searchModel.auditTime.length) {
        searchModel["createMinTime"] = searchModel.auditTime[0];
        searchModel["createMinTime"] = searchModel.auditTime[1];
      }
      delete searchModel.auditTime;
      return searchModel;
    },

    handleBizLicenseSuccess(res, file) {
      this.updateForm.bizLicense = res.data;
    },

    handleAvatarSuccess1(res, file) {
      this.updateForm.idCardFront = res.data;
    },

    handleAvatarSuccess2(res, file) {
      this.updateForm.businessLicense = res.data;
    },
    handleAvatarSuccess3(resp) {
      this.updateForm.officeImages.push(resp.data);
    },

    handleofficeImage1Success(res, file) {
      this.officeImage1 = res.data;
    },

    handleofficeImage2Success(res, file) {
      this.officeImage2 = res.data;
    },

    handleofficeImage3Success(res, file) {
      this.officeImage3 = res.data;
    },

    handleAvatarSuccess4(res) {
      this.updateForm.idCardBack = res.data;
    },

    handleAvatarSuccess5(res) {
      this.updateForm.bizSceneDesc = res.data;
    },

    handleAvatarSuccess6(res) {
      this.updateForm.merchantCommitment = res.data;
    },

    handleOtherImage1Success(res, file) {
      this.updateForm.otherOneImages = res.data;

    },

    handleOtherImage2Success(res, file) {
      this.updateForm.otherTwoImages = res.data;

    },

    handleOtherImage3Success(res, file) {
      this.updateForm.otherThreeImages = res.data;

    },

    handleofficeImageRemove(file) {
      let url = file.url
      if (file.response) {
        url = file.response.data
      }

      for (let i = 0; i < this.item.officeImages.length; i++) {
        if (this.item.officeImages[i] === url) {
          this.item.officeImages.splice(i, 1)
          break
        }
      }
    },

    processItem(data) {
      if (data.officeImages && data.officeImages.length > 0) {
        this.officeImage1 = data.officeImages[0];
        this.officeImage2 = data.officeImages[1];
        this.officeImage3 = data.officeImages[2];
      } else {
        data.officeImages = [];
        this.officeImageFiles = [];
      }

      // if (data.auditStatus != "init" && data.auditStatus != "temp") {
      //   this.active = 1;
      //   this.formDisabled = true;
      // }
    },
    beforeAvatarUpload(file) {
      const isLt5M = file.size / 1024 / 1024 < 5;
      const isJPEG = file.type === 'image/jpeg';
      const isJPG = file.type === 'image/jpg';
      const isPNG = file.type === 'image/png';
      if (!isLt5M) {
        this.$message.error("上传大小不能超过 5MB!");
      }
      if (!isJPEG && !isJPG && !isPNG) {
        this.$message({
          message: "请上传jpg 、png、jpeg 类型图片!",
        });

        return false;
      } else if (!isLt5M) {
        this.$message({
          message: "请上传小于5MB图片!",
        });
        return false;
      } else {
        return true;
      }

    },
  },
};
</script>
<style lang="scss">
.enterprise-content {
  .avatar-uploader .el-upload {

    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 144px;
    height: 81px;
    line-height: 81px;
    background-color: #fff;
    text-align: center;
  }

  .avatar-uploader-icon1 {
    margin-top: -20px;
  }

  .avatar {
    width: 144px;
    height: 81px;
    display: block;
  }

  .avatar1 {
    width: 81px;
    height: 125px;
    display: block;
  }

  .avatar-uploader-icon2 {
    font-size: 28px;
    color: #8c939d;
    width: 81px;
    height: 125px;
    line-height: 125px;
    background-color: #fff;
    text-align: center;
  }


  .avatar-uploader1 .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    width: 110px;
    height: 110px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-align: center;
  }

  .avatar-uploader1 .el-upload-list--picture-card .el-upload-list__item {
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    width: 110px;
    height: 110px;
    display: inline-block;
  }

  .avatar-uploader {
    display: relative;
  }






  .avatar-uploader1 .el-upload:hover {
    border-color: #409eff;
  }
}
</style>

<style lang="scss" scoped>
.operations {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.images-body {
  width: 56px;
  height: 56px;
  border-radius: 8px;
}

.cz-button {
  display: flex;
  flex-direction: column;

}

.ExtensionListPage {
  padding-bottom: 40px;
}

.enterprise-middle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px 0 16px 0;
  position: relative;

  .enterprise-middle-b {
    position: absolute;
    right: 0;
  }

  .enterprise-middle3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .enterprise-middle4 {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .enterprise-middle1 {
    display: flex;
    align-items: center;
    justify-content: center;

    .enterprise-middle2 {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.enterprise-middle span {
  font-size: 18px;
  font-weight: bold;
  margin-left: 8px;
}

.enterprise-hand {
  height: 109px;
  width: 100%;
  background-color: #fff;

  .enterprise-step {
    height: 109px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.enterprise-content {
  background-color: #fff;
  padding: 24px 0 24px 0;
}

.text-tip {
  margin-top: -20px;
}

.upload-text-tip {
  position: absolute;
  top: 47px;
  left: 36px;
}

.flex-box {
  display: flex;
}

.previewImg {
  width: 22px;
  cursor: pointer;
}

.previewBox {
  display: flex;
  align-items: center;

  a:hover {
    color: #409EFF !important;
  }
}
</style>
